import {
  Breadcrumb,
  Button,
  Card,
  Form,
  Radio,
  Select,
  DatePicker,
  Table,
  Tag,
  Space,
} from 'antd';

import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import errorSrc from 'assets/error.png';
import { Link } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { getChannels } from 'api/channel';
import { getArticle } from 'api/article';
const { Option } = Select;
const { RangePicker } = DatePicker;

export default function ArticleList() {
  // 定义颜色
  const articleStatus = [
    { id: -1, name: '全部', color: 'magenta' },
    { id: 0, name: '草稿', color: 'orange' },
    { id: 1, name: '待审核', color: 'red' },
    { id: 2, name: '审核通过', color: 'green' },
    { id: 3, name: '审核失败', color: 'cyan' },
  ];
  function finishFn(values) {
    console.log(values);
  }
  // 定义初始化频道数据
  const [channelList, setChannelList] = useState([]);
  // 初始化存储文章数据
  const [articles, setArticles] = useState({});
  // 获取频道列表函数
  async function getChannel() {
    let res = await getChannels();
    //  将数据存储在channelList中
    setChannelList(res.data.channels);
  }
  //获取文章数据函数
  async function getArticles(page,per_page) {
    const res = await getArticle({page,per_page});
    console.log(res, 'res999');
    setArticles(res.data);
  }
  // 在挂载完成后发起请求
  useEffect(() => {
    getChannel();
    getArticles();
  }, []);

  // 表格数据
  const columns = [
    {
      // 表头
      title: '封面',
      // 控制显示那列数据 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      dataIndex: 'cover',
      // React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性
      // key: 'title',
      // 渲染方式    生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引	function(text, record, index) {}
      render: (cover) => {
        if (cover.images.length) {
          return <img width={150} src={cover.images[0]} alt="" />;
        } else {
          return <img width={150} src={errorSrc} alt="" />;
        }
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      // key: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: function (value) {
        const obj = articleStatus.find((item) => item.id === value);
        return <Tag color={obj.color}>{obj.name}</Tag>;
      },
      // key: 'address',
    },
    {
      title: '发布时间',
      // key: 'tags',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    { title: '评论数', dataIndex: 'comment_count' },
    { title: '点赞数', dataIndex: 'like_count' },
    {
      title: '操作',
      dataIndex: 'like_count',
      render: function (createElement, context) {
        return (
          <Space>
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            ></Button>
            <Button
              type="primary"
              danger
              shape="circle"
              icon={<DeleteOutlined />}
            ></Button>
          </Space>
        );
      },
    },
  ];

  return (
    <div>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>文章内容</Breadcrumb.Item>
          </Breadcrumb>
        }
        bordered={false}
      >
        {/* form表单 */}
        {/* 互斥选框 */}
        {/* 给表单数据设置初始值 initialValues 内传入对象 */}
        <Form onFinish={finishFn} initialValues={{ status: -1, channel_id: 0 }}>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
              <Radio value={-1}>全部</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 下拉 */}
          <Form.Item label="频道" name="channel_id">
            <Select style={{ width: 120 }}>
              {channelList.map((item) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          {/* 时间控件 */}
          <Form.Item label="日期" name="date">
            <RangePicker />
          </Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form>

        {/* 表格 */}
        <Table
        
        rowKey='id'
        pagination={{
          // 点击切换分页触发onChange事件
          onChange:(page,pageSize)=>{
            console.log(page,pageSize);
            getArticles(page,pageSize)
          },
            position:['bottomCenter'],
            current:articles.page,
            pageSize:articles.per_page,
            total:articles.total_count
          }}
          style={{ marginTop: 24 }}
          // 表格列的配置描述
          columns={columns}
          // 数据数组
          dataSource={articles.results}
        ></Table>
      </Card>
    </div>
  );
}
